<template>
  <div class="first">
    <div class="left">
      <div class="one">
        <h4>人员通行视频</h4>
        <div class="img1">
          <img class="vioes" id="img" src="" alt="" />
        </div>
        <div class="news">
          <ul>
            <li v-for="(item, index) in pepleDate" :key="index" class="li_con">
              <img src="@/assets/through/avorte.png" class="imges1" alt="" />
              <p>{{ item.name }}</p>
              <p>{{ item.num }}</p>
              <p>{{ item.time }}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- <button @click="fnchanged">点击</button> -->
      <div id="pople"></div>
      <div id="total"></div>
    </div>
    <div class="right">
      <div class="one">
        <h4>人员通行视频</h4>
        <div class="img2">
          <!-- <img
            class="stopImg"
            :class="{ acticv: acticv }"
            src="@/assets/stop.png"
            alt=""
          /> -->
          <video class="vioes" src="" id="video"></video>
          <!-- <img class="vioes" src="@/assets/through/2.jpg" alt="" /> -->
        </div>
        <div class="news">
          <ul>
            <li
              v-for="(item, index) in pepleReplce"
              :key="index"
              class="li_con"
            >
              <img src="@/assets/through/avorte.png" class="imges1" alt="" />
              <p>{{ item.name }}</p>
              <p>{{ item.num }}</p>
              <p>{{ item.time }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div id="car"></div>
      <div id="outLine"></div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  onBeforeMount,
  onUnmounted,
  computed,
  watch,
  onUpdated,
  nextTick,
} from "vue";
import * as echarts from "echarts";
import useFontSize from "@/hooks/useFontSize";
import { useMqtt } from "@/hooks/useMqtt";
import { useStore } from "@/store/index.js";
let store = useStore();
const { isConnected, publish, subscribe } = useMqtt(
  "ws://121.36.203.95:8083/mqtt"
  // "ws://51dldz.xyz:8083/mqtt"
);
let { fontSize } = useFontSize();
let pepleDate = ref([
  { imgUrl: "", name: "啊ac", num: "00366699", time: "2023-09-10 14:03:20" },
  { imgUrl: "", name: "啊ac", num: "00366699", time: "2023-09-10 14:03:20" },
  { imgUrl: "", name: "啊啊啊", num: "00366699", time: "2023-09-10 14:03:20" },
  { imgUrl: "", name: "啊版本", num: "00366699", time: "2023-09-10 14:03:20" },
]);
const pepleReplce = computed(() => {
  pepleDate.value.forEach((item) => {
    if (item.name.length <= 2) {
      item.name = item.name.slice(0, -2) + "*";
    } else {
      item.name = item.name.slice(0, -2) + "**";
    }
    if (item.num.length != 0) {
      item.num =
        item.num.slice(0, 3) +
        "****" +
        item.num.slice(item.num.length - 3, item.num.length);
    }
  });
  return pepleDate.value;
});
let chartsColor = "#fff";
// 人员类型统计
let popleCharts = ref(null);
const option = {
  title: {
    text: "人员类型统计",
    textStyle: {
      color: chartsColor,
      fontSize: 18,
    },
    left: 10,
    top: 10,
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "center",
    left: "60%",
    width: 32,
    textStyle: {
      color: chartsColor,
    },
    selectedMode: false,
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      center: ["35%", "50%"],
      radius: ["40%", "50%"],
      itemStyle: {
        borderRadius: 2,
        borderColor: "#959aa0",
        borderWidth: 2,
      },
      label: {
        show: true,
        position: "center",
        formatter: () => {
          let str = "927" + "\n" + `总人数`;
          return str;
        },
        color: chartsColor,
        lineHeight: 16,
        fontSize: 16,
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 798,
          name: "员工 | 85.2% 790",
          itemStyle: { color: "#78c540" },
        },
        {
          value: 19,
          name: "安保 | 2% 19",
          itemStyle: { color: "#12a5aa" },
        },
        {
          value: 118,
          name: "访客 | 12.8% 118",
          itemStyle: { color: "#0279f4" },
        },
      ],
    },
    {
      type: "pie",
      radius: ["51%", "52.5%"],
      center: ["35%", "50%"],
    },
  ],
};
const popleFn = () => {
  let pople = document.getElementById("pople");
  popleCharts = echarts.init(pople);
  popleCharts.setOption(option);
};
// setTimeout(() => {
let fnchanged = function () {
  let newData = [
    {
      value: 200,
      name: "员工 | 85.2% 790",
      itemStyle: { color: "#78c540" },
    },
    {
      value: 200,
      name: "安保 | 2% 19",
      itemStyle: { color: "#12a5aa" },
    },
    {
      value: 200,
      name: "访客 | 12.8% 118",
      itemStyle: { color: "#0279f4" },
    },
  ];
  option.series[0].data = newData;
  popleCharts.setOption(option, true);
};
// 告警统计
let totalCharts = ref(null);
const totalFn = () => {
  const option = {
    title: {
      text: "人员类型统计",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      left: 10,
      top: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 32,
      textStyle: {
        color: chartsColor,
      },
      selectedMode: false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        center: ["35%", "50%"],
        radius: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#959aa0",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "center",
          formatter: () => {
            let str = "0" + "\n" + `总数`;
            return str;
          },
          color: chartsColor,
          lineHeight: 16,
          fontSize: 16,
        },
        data: [
          { value: 0, name: "紧急 | 0% 0", itemStyle: { color: "#0178f6" } },
          { value: 0, name: "一般 | 0% 0", itemStyle: { color: "#19a2ac" } },
        ],
      },
      {
        // name: "Access From",
        type: "pie",
        radius: ["51%", "52.5%"],
        center: ["35%", "50%"],
      },
    ],
  };
  let total = document.getElementById("total");
  totalCharts = echarts.init(total);
  totalCharts.setOption(option);
};
// 车辆流量统计
let tepData = ref([]);
let carCharts = ref(null);
let optionCart = ref({});
const carFn = () => {
  optionCart.value = {
    title: {
      text: "车流量统计",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      left: 10,
      top: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "1%",
      right: "center",
      textStyle: {
        color: chartsColor,
      },
      selectedMode: false,
      // width: 32,
    },
    xAxis: {
      type: "category",
      data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        color: chartsColor,
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 40,
      interval: 8,
      splitLine: { show: false },
      axisLabel: {
        color: chartsColor,
      },
    },
    series: [
      {
        name: "出园",
        // data: tepData.value.map((itme) => Number(itme.temp)),
        data: [2, 5, 9, 12, 25, 8],
        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba( 10, 121, 234,0.8)",
            },
            {
              offset: 1,
              color: "rgba( 10, 121, 234,0.1)",
            },
          ]),
        },
        symbol: "circle",
        symbolSize: 4,
      },
      {
        name: "入园",
        // data: tepData.value.map((itme) => Number(itme.humi)),
        data: [8, 12, 5, 6, 24, 9],
        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba( 145, 197, 148,0.8)",
            },
            {
              offset: 1,
              color: "rgba( 145, 197, 148,0.1)",
            },
          ]),
        },
        symbol: "circle",
        symbolSize: 4,
      },
    ],
  };
  let car = document.getElementById("car");
  carCharts = echarts.init(car);
  carCharts.setOption(optionCart.value);
  // }
};
// 违规停车数量统计
let outLineCharts = ref(null);
const outLineFn = () => {
  let option = {
    title: {
      text: "违规停车数量统计",
      textStyle: {
        color: chartsColor,
        fontSize: 18,
      },
      left: 10,
      top: 10,
    },
    xAxis: {
      type: "category",
      data: [
        "08-28",
        "08-29",
        "08-30",
        "08-30",
        "08-31",
        "09-01",
        "09-02",
        "09-03",
      ],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        color: chartsColor,
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 300,
      interval: 60,
      splitLine: { show: false },
      axisLabel: {
        color: chartsColor,
      },
    },
    series: [
      {
        name: "出园",
        data: [145, 140, 143, 140, 139, 140, 140],
        itemStyle: { color: "#1178ea" },
        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(58,77,233,0.8)",
            },
            {
              offset: 1,
              color: "rgba(58,77,233,0.2)",
            },
          ]),
        },
        symbol: "circle",
        symbolSize: 4,
        label: {
          show: true,
          position: "top",
          color: chartsColor,
        },
      },
    ],
  };
  let outLine = document.getElementById("outLine");
  outLineCharts = echarts.init(outLine);
  outLineCharts.setOption(option);
};
// 视频1
// let video_1 = ref({
//   topic: "videoTopic",
//   qos: 0,
// });
let getVideo = function (arr) {
  console.log(arr);
  let ele = document.getElementById("img");
  redrawImg(arr, ele);
};
watch(
  () => store.mqttMsg,
  (newVal, oldVal) => {
    // console.log(newVal);
    getVideo(newVal.videoTopic);
  },
  { deep: true }
);
// 视频2
let acticv = ref(false);
// let getVideo2 = function () {
//   let video = document.getElementById("video");
//   //获得video摄像头区域
//   let constraints = {
//     video: { width: video.clientWidth, height: video.clientHeight },
//     autio: true,
//   };
//   // 这里介绍新的方法，返回一个 Promise对象
//   // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
//   // then()是Promise对象里的方法
//   // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序

//   // 避免数据没有获取到
//   // let promise = navigator.mediaDevices.getUserMedia(constraints);
//   // 成功调用
//   // if (!promise) return;
//   // promise.then(function (MediaStream) {
//   //   /* 使用这个MediaStream */
//   //   if (MediaStream) {
//   //     video.srcObject = MediaStream;
//   //     video.controls = false;
//   //     acticv.value = false;
//   //     video.play();
//   //   }
//   // });
//   // 失败调用
//   // promise.catch(function (err) {
//   //   console.log(err);
//   //   /* 处理error */
//   // });
//   video.addEventListener("click", function (e) {
//     video.paused
//       ? (video.play(), (acticv.value = false))
//       : (video.pause(), (acticv.value = true));
//   });
// };

let redrawImg = function (message, ele) {
  const blob = new Blob([message], { type: "image/jpeg" });
  const img = new Image();
  const url = URL.createObjectURL(blob);
  img.src = url;
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, img.width, img.height);
    ctx.putImageData(imageData, 0, 0);
    const newImageUrl = canvas.toDataURL("image/jpeg");
    ele.src = newImageUrl;
  };
};
onBeforeMount(() => {});
onMounted(() => {
  carFn();
  // getVideo2();
  popleFn();
  totalFn();
  outLineFn();
});

window.addEventListener("resize", function () {
  popleCharts.resize();
  totalCharts.resize();
  carCharts.resize();
  outLineCharts.resize();
});
onUnmounted(() => {
  popleCharts.dispose();
  totalCharts.dispose();
  carCharts.dispose();
  outLineCharts.dispose();
});
</script>
<style scoped>
.main {
  width: 100vw;
  height: 90vh;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.one {
  color: #fff;
  width: 4rem;
  height: 4rem;
  padding: 0 0.2rem;
  font-size: 18px;
  overflow: hidden;
  box-sizing: border-box;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}
.left .one {
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}
.img2 {
  display: flex;
  justify-content: center;
  position: relative;
}
.stopImg {
  display: block;
  position: absolute;
  top: 40%;
  left: 40%;
  width: 0.5rem;
  height: 0.5rem;
  display: none;
}
.acticv {
  display: block;
}
.img1 {
  display: flex;
  justify-content: center;
}
.vioes {
  display: block;
  padding: 0.1rem 0;
  width: 3.2rem;
  height: 2rem;
}
h4 {
  padding-left: 2%;
  padding-top: 0.1rem;
}

.left {
  float: left;
  width: 4rem;
}
.right {
  float: right;
  width: 4rem;
}
.li_con {
  width: 3.5rem;
  padding-top: 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
#pople {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}

.imges1 {
  width: 0.16rem;
  height: 0.16rem;
}
#total {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}
#car {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}

#outLine {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}
</style>
